<template>
  <div class="m-coin-avatar flex flex-center" :style="comCoinAvatarStyle">
    <img :src="imgData" alt="" class="m-coin-avatar__img" />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import { coin2ImgData } from "./coin2ImgData";
import { CoinName } from "./types";
export default defineComponent({
  name: "MCoinAvatar",
  props: {
    coin: {
      type: String as PropType<string>,
      required:true
    },
    size: {
      type: String,
      default: "22px",
    },
  },
  setup(props) {
    const imgData = computed(() => {
      const coin:string =  props.coin as string;
      if (!coin) {
        return "";
      }
      return coin2ImgData[coin.toLowerCase()];
    });

    const comCoinAvatarStyle = computed(() => {
      return {
        width: props.size,
        height: props.size,
      };
    });

    return {
      imgData,
      comCoinAvatarStyle,
    };
  },
});
</script>
